<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <!-- 顶部导航栏 -->
    <div class="bg-black text-white">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <a th:href="@{/index}" class="flex items-center hover:text-gray-300 transition-colors">
                    <i class="fa fa-shopping-bag text-xl mr-2"></i>
                    <span class="text-lg font-semibold">我的商店</span>
                </a>
            </div>
            <div class="flex items-center space-x-4">
                <th:block th:if="${session.user != null}">
                    <span>
                        <i class="fa fa-user-circle mr-1"></i>
                        <span th:text="${session.user.username}">用户名</span>
                    </span>
                    <a th:href="@{/logout}" class="text-white hover:text-gray-300 transition-colors">
                        <i class="fa fa-sign-out mr-1"></i>退出登录
                    </a>
                </th:block>
                <th:block th:unless="${session.user != null}">
                    <span>
                        <i class="fa fa-exclamation-circle mr-1"></i>
                        请先登录
                    </span>
                    <a th:href="@{/login}" class="text-white hover:text-gray-300 transition-colors">
                        <i class="fa fa-sign-in mr-1"></i>去登录
                    </a>
                </th:block>
            </div>
        </div>
    </div>

    <!-- 商品详情内容 -->
    <div class="container mx-auto px-4 py-8">
        <div class="bg-white rounded-lg shadow-lg overflow-hidden">
            <div class="md:flex">
                <!-- 商品图片 -->
                <div class="md:w-1/2 p-8">
                    <img  th:src="${product.imageUrl}" class="w-full h-auto rounded-lg">

                </div>
                
                <!-- 商品信息 -->
                <div class="md:w-1/2 p-8">
                    <h1 class="text-3xl font-bold mb-4" th:text="${product.name}">商品名称</h1>
                    <div class="text-2xl text-red-600 font-bold mb-4">
                        <span th:text="${product.price}">价格</span>元
                    </div>
                    <div class="mb-6">
                        <h2 class="text-lg font-semibold mb-2">商品描述</h2>
                        <p class="text-gray-600" th:text="${product.description}">商品描述内容</p>
                    </div>
                    
                    <!-- 购买数量 -->
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">购买数量</label>
                        <div class="flex items-center">
                            <button onclick="decreaseQuantity()" class="px-3 py-1 border rounded-l-lg hover:bg-gray-100">
                                <i class="fa fa-minus"></i>
                            </button>
                            <input type="number" id="quantity" value="1" min="1" 
                                   class="w-20 text-center border-t border-b py-1">
                            <button onclick="increaseQuantity()" class="px-3 py-1 border rounded-r-lg hover:bg-gray-100">
                                <i class="fa fa-plus"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 加入购物车按钮 -->
                    <button onclick="addToCart()" 
                            class="w-full bg-blue-600 text-white py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center">
                        <i class="fa fa-shopping-cart mr-2"></i>
                        加入购物车
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function increaseQuantity() {
            const input = document.getElementById('quantity');
            input.value = parseInt(input.value) + 1;
        }

        function decreaseQuantity() {
            const input = document.getElementById('quantity');
            if (parseInt(input.value) > 1) {
                input.value = parseInt(input.value) - 1;
            }
        }

        function addToCart() {
            const quantity = document.getElementById('quantity').value;
            // 从URL路径中获取商品ID
            const pathParts = window.location.pathname.split('/');
            const productId = pathParts[pathParts.length - 1];
            if (!productId || isNaN(productId)) {
                alert('商品ID无效');
                return;
            }
            if (!quantity || isNaN(quantity) || parseInt(quantity) <= 0) {
                alert('请输入有效的商品数量');
                return;
            }
            
            fetch('/cart/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    productId: parseInt(productId),
                    quantity: parseInt(quantity)
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('成功加入购物车！');
                } else {
                    alert('加入购物车失败：' + data.message);
                }
            })
            .catch(error => {
                alert('操作失败，请稍后重试');
                console.error('Error:', error);
            });
        }

    </script>
</body>
</html> 